﻿<script setup lang="ts" name="UploadButton">
const emit = defineEmits(['save'])

const props = defineProps({
  showPreviewBtn: { type: Boolean, default: true },
  config: { type: Object },
  data: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const modalType = ref('')
const uploadModalRef = ref(null)
const openUploadModalDialog = () => {
  modalType.value = 'upload'
  const uploadModalRefDom = unref(uploadModalRef)
  if (!uploadModalRefDom) return
  uploadModalRefDom.handleOpenDialog()
}

const openPreviewModalDialog = () => {
  modalType.value = 'preview'
  const uploadModalRefDom = unref(uploadModalRef)
  if (!uploadModalRefDom) return
  uploadModalRefDom.handleOpenDialog()
}

const saveUpload = (v) => {
  emit('save', { buttonType: modalType.value, fileType: props.config.type, data: v })
}
</script>

<template>
  <div class="upload-button">
    <el-button-group v-if="props.showPreviewBtn">
      <el-button type="primary" @click="openUploadModalDialog">
        <svg-icon icon="ri:upload-cloud-2-line"></svg-icon>
        {{$t('buttons.buttonUpload')}}
      </el-button>
      <el-button @click="openPreviewModalDialog">
        {{$t('buttons.buttonPreview')}}
        <svg-icon icon="ri:eye-line"></svg-icon>
      </el-button>
    </el-button-group>
    <el-button v-else type="primary" @click="openUploadModalDialog">
      <svg-icon icon="ri:upload-cloud-2-line"></svg-icon>
      {{$t('buttons.buttonUpload')}}
    </el-button>
    <UploadModal ref="uploadModalRef" :modalType="modalType" :config="props.config" :data="props.data" @save="saveUpload"></UploadModal>
  </div>
</template>

<style scoped lang="scss">
.upload-button {
  .el-button {
    .el-icon {
      margin-right: 5px;
    }
  }

  .el-button+.el-button {
    .el-icon {
      margin-right: 0;
      margin-left: 5px;
    }
  }
}
</style>
